<!-- 充值 -->
<template>
  <div>
    <div class="content">
      <div class="content_title">
        1.保存官方收款二维码或者复制地址
      </div>
      <div class="tac" style="border-bottom:.02rem solid #d9d9d9">
        <!-- <img src="../../assets/images/ewm.png" width="50%" alt="">			 -->
        <img :src="fileUrl" width="80%" alt="">
        <van-row type="flex" justify="center">
          <van-col :span="8">
            <van-button type="info" size="small" @click="download">保存图片</van-button>
          </van-col>
        </van-row>
        <van-row style="padding:0rem .3rem">
          <textarea v-model="cashAdd" :row="5" placeholder="请输入收款地址" disabled class="cash_input" />
          </van-row>
				<van-row type="flex" justify="center" style="padding-bottom:.3rem">
					<van-col :span="8">
						<van-button type="info" size="small" class="tag-read" :data-clipboard-text="cashAdd" @click="copyText">复制地址</van-button>
					</van-col>
				</van-row>
			</div>
			<div class="content_title">
			<van-row class="cash_contenr">
      <van-col span="24">
        <p>输入充值金额(USDT)</p>
        <van-field  v-model="data.amt" type="number" ref="amt"  placeholder="请输入金额" />
      </van-col>
    </van-row>
			</div>
			<div class="content_title">
				2.通过第三方钱包平台转账到官方收款地址，成功后填写哈希值提交审核，预计30分钟内处理
			</div>
			<van-row style="padding:0rem .3rem">
				<textarea v-model="data.hashStr" ref="hashStr" :row="5" placeholder="请输入哈希值" class="cash_input" />
			</van-row>
			<van-row type="flex" justify="center" style="padding-bottom:.3rem">
				<van-col :span="8">
					<van-button type="info" size="small" :loading="loading" loading-text="加载中..." @click="save">提交审核</van-button>
				</van-col>
			</van-row>
			<van-row>
			  <div class="contact" @click="$router.push('/contactCustomer')">
					<p class="contact_text"><van-icon name="service" /></p>
			    <p class="contact_text">联系客服</p>
			  </div>
			</van-row>
		</div>
	</div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  data () {
    return {
      amtData: {},
      fileUrl: '',
      data: {
        hashStr: '',
        amt: '',
      },
      cashAdd: '',
      loading: false
    }
  },
  methods: {
    copyText () {
      var clipboard = new Clipboard('.tag-read')
      clipboard.on('success', e => {
        this.$notify({ type: 'success', message: '复制成功' });
        clipboard.destroy();// 释放内存
      })
      clipboard.on('error', e => {
        this.$notify({ type: 'success', message: '复制失败' });
        clipboard.destroy(); // 释放内存
      })
    },
    //充值提交
    async save () {
      if (this.data.amt == '') {
        this.$notify({ type: 'warning', message: '充值金额不能为空' });
        this.$refs.amt.focus();
        return;
      }
      if (this.data.hashStr == '') {
        this.$notify({ type: 'warning', message: '哈希值不能为空' });
        this.$refs.hashStr.focus();
        return;
      }
      this.loading = true
      const url = '/recharge/save'
      let result = await this.request.mobileRequest('POST', url, this.data)
      if (result.code == 200) {
        this.$notify({ type: 'success', message: result.msg });
        this.loading = false
        this.$router.go(-1)
      } else {
        this.loading = false
        this.$notify({ type: 'warning', message: result.msg });
      }
    },
    //保存图片
    download () {
      let self = this
      let dtask = plus.downloader.createDownload(this.fileUrl, {}, function (d, status) {
        if (status == 200) {
          plus.gallery.save(d.filename, function () {//保存到相册方法
            self.$notify({ type: 'success', message: '保存成功' });
          }, function () {
            self.$notify({ type: 'warning', message: '保存失败，请重试' });
          });
        } else {
          self.$notify({ type: 'warning', message: '下载失败' });
        }
      });
      dtask.start();
    }
  },
  async mounted () {
    //收款二维码
    this.fileUrl = await this.common.cashList('QR_CODE_URL')
    this.cashAdd = await this.common.cashList('RECHARGE_URL')
  },
  created () {
    // this.amtData = JSON.parse(localStorage.getItem('userData'))
    // this.cashAdd = this.amtData.cashAdd
    // RECHARGE_URL
  }
}
</script>

<style scoped>
.content {
  background: #fff;
}
.content_title {
  padding: 0.2rem 0.3rem;
  font-size: 0.36rem;
  line-height: 0.6rem;
  border-bottom: 0.01rem solid #d9d9d9;
}
.content img {
  padding: 0.2rem;
}
.cash_input {
  width: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
  border: none;
  border: 0.02rem solid #d9d9d9;
  border-radius: 0.1rem;
  margin-bottom: 0.2rem;
  margin-top: 0.3rem;
}
.contact {
  position: fixed;
  right: 4%;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #e8bb57;
  color: #555;
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.349019607843137);
  bottom: 7%;
}
.contact_text {
  font-size: 0.3rem;
}
.contact_text i {
  font-size: 0.4rem;
}
</style>
